<script setup>

import {
  LoadingOutlined,
} from "@ant-design/icons-vue";

const props = defineProps({
// 层级
  zIndex: {
    type: Number,
    default: 2,
    },
    loading: {
    type: Boolean,
    default: false,
    },
    text: {
        type: String,
        default: '加载中...',
    }
})
</script>

<template>
    <div class="note_data" :style="{
        'z-index': props.zIndex
    }" v-if="props.loading">
      <div class="loding_content">
        <LoadingOutlined class="loding_icon"></LoadingOutlined>
          <span class="loding_tips">{{ props.text }}</span>
      </div>
    </div>
</template>

<style lang="less" scoped>
// 加载中 模态框
.note_data{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 2;

  display: flex;
  justify-content: center;
  align-items: center;
  .loding_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
    .loding_tips{
      font-size: 20px;
      font-weight: bold;
    }
    .loding_icon{
      font-size: 30px;

    }
  }
}
</style>